<template>
  <div class="main">
    <!-- 导航栏 -->
    <mt-header fixed title="收藏" style="background: #f49b00">
      <router-link to="/home/me" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div style="height: 40px"></div>

    <!-- 收藏列表 -->
    <div class="body1" v-for="item in video" :key="item.vid" @click="details(item.vid)">
        <img :src="`${item.pic}`" />
        <div class="body1-1">
        <p>{{item.title}}</p>
        <p style="color:#aaa;font-size:12px;">发布时间：{{time(item.time)}}</p>
        </div>
    </div>

    <!-- 分割线 -->
    <van-divider :style="{ color: '#aaa', borderColor: '#ddd', padding: '0 10px',fontSize:'13px' }">到底啦</van-divider>
  </div>
</template>

<script>
export default {
    data() {
        return {
            video: [], // 存储收藏列表
        }
    },
    methods: {
        // 点击卡片跳转到详情页方法
        details(id) {
            this.$router.push(`/video/details?vid=${id}`);
        },
        // 发送请求，获得我的收藏数据
        getdata(){
            let uid = this.$store.state.uid
            let params = {"uid":uid}
            this.axios.post('/video/mycol',params).then(res=>{
                console.log(res);
                this.video = res.data.data
            })
        },
        // 转换时间函数
        time(time) {
            time = this.dayjs(time).format("YYYY-MM-DD");
            return time
        }
    },
    mounted(){
        this.getdata()
    }
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #fbf7f7;
  height: 100vh;
}

.body1 {
  display: flex;
  margin: 10px;
  border-radius: 5px;
  background-color:  white;
  box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.02);
}
.body1 img {
  width: 25%;
  height: 100%;
  margin: 5px;
}
.body1-1 {
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  p {
    font-size: 15px;
    color: #494747;
    margin: 5px;
  }
}
</style>